<template>
  <!-- 菜单（有子级菜单）-->
  <template v-for="item in menus">
    <el-sub-menu
      :index="item.name + ''"
      v-if="item.children && item.children.length > 0"
      :key="item.name"
    >
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <MyNavMenu :menus="item.children"> </MyNavMenu>
    </el-sub-menu>
    <!-- 菜单（没有子级菜单）-->
    <el-menu-item :index="item.path" :key="item.name" v-else>
      <template #title>
        <span>{{ item.name }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import { onMounted } from 'vue'

defineOptions({
  name: 'MyNavMenu',
})

const props = defineProps({
  menus: {
    type: Array,
    default: () => [],
  },
})

onMounted(() => {
  console.log(props.menus)
})
</script>

<style lang="scss" scoped></style>
